<template>
  <div class="detail-goods-info" v-if="Object.keys(goodsInfo).length">
    <!-- 优惠信息 -->
    <div class="discount">
      <i class="blackLine-top"></i>
      <div class="dicount-info">{{ goodsInfo.desc }}</div>
      <i class="blackLine-bottom"></i>
    </div>

    <!--

      旧的方式: 只遍历一个数组
      <div class="shop-images">
        <div class="shop-images-text">{{ goodsInfo.detailImage[0].key }}</div>

        <div class="shop-images-item">
          <img
            v-for="(t, idx) in goodsInfo.detailImage[0].list"
            :key="idx"
            :src="t"
            @load="imgLoad"
          />
        </div>
      </div>
    -->

    <!-- TODO: 完整版遍历 -->
    <div class="shop-images" v-for="t in goodsInfo.detailImage" :key="t.key">
      <!-- 简介标题 -->
      <div class="shop-images-text">{{ t.key }}</div>

      <!-- 大量图片, 有一个商品有数据有bug -->
      <div class="shop-images-item">
        <img
          v-for="item in t.list"
          :src="item"
          :key="item"
          alt=""
          @load="imgLoad"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    goodsInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {
      // 图片加载次数
      counter: 0,
      // 图片数组长度
      imagesLength: 0
    }
  },
  methods: {
    imgLoad () {
      // TODO: 当我图片的加载次数 === 图片数组长度时, 此时图片已经加载完毕可以发送事件, 这里也可以用混入的方式解决
      // 第一种方式
      if (++this.counter === this.imagesLength) {
        this.$emit('goodsImgLoad')
      }

      // 第二种方式: 混入防抖(如果使用混入防抖, 那么$emit发射的事件次数又多了起来, 建议还是第一种方式)
      // this.$emit('goodsImgLoad')
    },

    // 封装了一个统计 对象数组 一共有多少个子元素的方法
    counterAry (ary) {
      let count = 0
      // 所以for in更适合遍历对象，不要使用for in遍历数组
      // for of适合遍历数组
      for (const value of ary) {
        // 无奈的判断
        value.list && (count += value.list.length)
      }
      return count
    }
  },
  watch: {
    // 监听父组件传递过来的goodsInfo对象的变化: 旧方式只遍历1个数组
    // goodsInfo (newVal, oldVal) {
    //   this.imagesLength = newVal.detailImage[0].list.length
    // }

    // TODO: 普通监听
    goodsInfo (newObj, oldObj) {
      this.imagesLength = this.counterAry(newObj.detailImage)
    }

    // TODO: 重点, 深度监听goodsInfo对象的变化
    // goodsInfo: {
    //   handler: function (newObj, oldObj) {
    //     // 调用方法
    //     this.imagesLength = this.counterAry(newObj.detailImage)
    //   },
    //   deep: true
    // }
  },
  components: {}
}
</script>

<style lang="less" scoped>
.detail-goods-info {
  padding: 0 10px 20px;
  border-bottom: 5px solid #f2f5f8;

  .discount {
    margin: 20px 0;

    .dicount-info {
      margin: 15px 0;
    }

    .blackLine-top,
    .blackLine-bottom {
      position: relative;
      display: block;
      width: 100px;
      height: 1px;
      background-color: #a3a3a5;
    }

    .blackLine-bottom {
      float: right;
    }

    .blackLine-top::before,
    .blackLine-bottom::after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 5px;
      height: 5px;
      background-color: #000;
    }

    .blackLine-bottom::after {
      right: 0;
    }
  }

  .shop-images {
    .shop-images-text {
      position: relative;
      margin: 20px 0;
      font-size: 18px;
      color: #5c5c5c;
      text-align: center;
      font-weight: 700;

      &::before,
      &::after {
        content: "";
        position: absolute;
        width: 60px;
        height: 1px;
        background-color: #0e49b5;
      }

      &::before {
        top: 50%;
        left: 50% - 30px;
      }

      &::after {
        top: 50%;
        right: 50% - 30px;
      }
    }
  }
  .shop-images-item {
    img {
      width: 100%;
    }
  }
}
</style>
